<template>
  <view>
    <view class="goods-list">
      <!-- 将循环时的 block 组件修改为 view 组件，并绑定 click 点击事件处理函数 -->
      <view v-for="(goods, index) in goodsList" :key="index" @click="gotoDetail(goods)">
        <!-- 使用组件复用的方式，简化商品列表页面 -->
        <my-goods :goods="goods"></my-goods>
      </view>
    </view>
  </view>
</template>

<script>
  import myGoods from '../../components/my-goods/my-goods.vue';
  export default {
    data() {
      return {
        queryObj: { // 请求参数对象
          query: '', // 关键词
          cid: '', // 商品分类id
          pagenum: 1, // 页码
          pagesize: 10 // 一页的数据
        },
        goodsList: [],
        total: 0,
        // 默认的空图片 
         isLoading: false, // 是否在请求数据
      };
    },
    components:{
      "my-goods": myGoods
    },
    onLoad(options){
      this.queryObj.query = options.query || "";
      this.queryObj.cid = options.cid || "";
      // console.log(this.queryObj)
      this.getGoodsList();
    },
    onReachBottom(){
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！'); // 如果请求完毕，就不再发送任何请求
      if (this.isloading) return; // 只要还在请求，就不触发新一轮的请求
      this.queryObj.pagenum++;
      this.getGoodsList();
    },
    onPullDownRefresh(){ // 下拉刷新函数，重置关键数据
      this.queryObj.pagenum = 1;
      this.total = 0;
      this.goodsList = [];
      this.isLoading = false;
      this.getGoodsList(()=>{uni.stopPullDownRefresh()});
    },
    methods: {
      async getGoodsList(fn){
        this.isLoading = true; // 判断是否在请求数据
        const {data: res} = await uni.$http.get('/api/public/v1/goods/search', this.queryObj);
        this.isLoading = false;
        fn && fn(); // 由下拉刷新函数得来，取消下拉刷新
        if(res.meta && res.meta.status !== 200) return uni.$showMsg();
        // 当请求数据加载完毕后，返回来的res是没有message属性的，所以需要作判断
        this.goodsList = [...this.goodsList, ...(res.message ? res.message.goods : [])];
        this.total = res.message ? res.message.total : this.total;
      },
      gotoDetail(goods){
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id
        })
      }
    }
  }
</script>

<style lang="scss">

</style>
